<template>
  <div class="seckill-shop">
    <div class="title">
      <div class="seckill-visible">
        <!-- 选择是否显示某类型商品 -->
        <p>是否显示</p>
        <el-select
          v-model="commodityStatus"
          clearable
          placeholder="请选择"
          @change="changeData(pageIndex, pageSize)"
        >
          <el-option
            v-for="item in options2"
            :key="item.value2"
            :label="item.label2"
            :value="item.value2"
          />
        </el-select>
      </div>
      <!-- 选择配置名称 -->
      <div class="deploy-name">
        <p>配置类型</p>
        <el-select
          v-model="commodityClass"
          clearable
          placeholder="请选择"
          @change="changeData(pageIndex, pageSize)"
        >
          <el-option
            v-for="item in options1"
            :key="item.value1"
            :label="item.label1"
            :value="item.value1"
          />
        </el-select>
      </div>
      <!-- 搜索秒杀商品 -->
      <div class="seckill-name">
        <p>秒杀名称：</p>
        <el-input
          v-model="input"
          placeholder="请输入秒商品ID/名称"
        />
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      max-height="400"
    >
      <el-table-column
        prop="id"
        label="ID"
        fixed
        align="center"
      />
      <el-table-column
        prop="deploy"
        label="配置"
        align="center"
        width="150"
      />
      <el-table-column
        prop="period"
        label="秒杀时段"
        align="center"
        width="200"
      />
      <el-table-column
        label="商品图片"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <img :src="scope.row.address">
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="活动标题"
        align="center"
        width="200"
      />
      <el-table-column
        prop="intro"
        label="活动简介"
        align="center"
        width="200"
      />
      <el-table-column
        prop="cost"
        label="原价"
        align="center"
        width="150"
      />
      <el-table-column
        prop="spike"
        label="秒杀价"
        align="center"
        width="150"
      />
      <el-table-column
        prop="limit"
        label="限量"
        align="center"
        width="150"
      />
      <el-table-column
        prop="residue"
        label="限量剩余"
        align="center"
        width="150"
      />
      <el-table-column
        prop="date"
        label="创建时间"
        align="center"
        width="200"
      />
      <el-table-column
        label="秒杀状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 1"
            active-color="#1890ff"
            inactive-color="#dcdfe6"
            @input="setStatus($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <DialogShop
      v-if="showPile"
      :scops="scops"
      @isShowPile="isShowPile"
    />
  </div>
</template>

<script>
import {goodsList} from '../../../../api/seckillList'
import DialogShop from "./DialogShop";
export default {
  components: {
    DialogShop
  },
  data() {
    return {
      options1: [
        {
          value1: "",
          label1: "全部"
        },
        {
          value1: "0",
          label1: "母婴"
        },
        {
          value1: "1",
          label1: "男装"
        },
        {
          value1: "2",
          label1: "女装"
        },
        {
          value1: "3",
          label1: "护肤"
        }
      ],
      options2: [
        {
          value2: "",
          label2: "全部"
        },
        {
          value2: "0",
          label2: "无状态"
        },
        {
          value2: "1",
          label2: "有状态"
        }
      ],
      value: "",
      input: "",
      tableData: [],
      currentPage4: 1,
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      commodityClass: null,
      commodityStatus: null,
      showPile: false,
      scops: {}
    };
  },
  watch: {
    input() {
      //防抖
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.changeData(this.pageIndex, this.pageSize);
      }, 700);
    }
  },
  created() {
     goodsList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyWord: this.input,
          classId: this.commodityClass,
          status: this.commodityStatus
        })
        .then(res => {
          if (res.code === 20000) {
            this.tableData = [...res.data];
            this.total = res.total;
          }
        });
  },
  methods: {
    handleDelete(row) {
      this.tableData = this.tableData.filter((item) => {
        return item.id !== row.id;
      });
    },
    setStatus(status, row) {
      setTimeout(() => {
        row.status = status ? 1 : 0;
      }, 500);
    },
    changeData(ind, page) {
      goodsList({
          pageIndex: ind,
          pageSize: page,
          keyWord: this.input,
          classId: this.commodityClass,
          status: this.commodityStatus
        })
        .then(res => {
          if (res.code === 20000) {
            this.tableData = res.data;
            this.total = res.total;
          }
        });
    },
    handleClick(row) {
      console.log(row, "seck");
      this.showPile = true;
      this.scops = row;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.changeData(this.pageIndex, val);
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.changeData(val, this.pageSize);
    },
    isShowPile() {
      this.showPile = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.seckill-shop {
  width: 100%;
  height: 100%;
  padding: 20px 20px 10px 20px;
  background: #ffffff;

  .title {
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 20px 0;
    font-size: 16px;
    font-weight: bold;
    .seckill-visible {
      height: 100%;
      display: flex;
      align-items: center;
      p {
        color: #564e53;
        font-weight: bold;
        padding: 0 16px;
      }
    }
    .deploy-name {
      height: 100%;
      display: flex;
      align-items: center;
      p {
        color: #564e53;
        font-weight: bold;
        padding: 0 16px;
      }
    }
    .seckill-name {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 30px;
      p {
        color: #564e53;
        font-weight: bold;
        padding-right: 10px;
      }
      ::v-deep .el-input {
        width: 208px;
      }
    }
  }

  ::v-deep .el-table th.gutter {
    /* 
    * 解决element-ui 表格篡位的问题 👇 
    */
    display: table-cell !important;
  }
  .el-pagination {
    padding: 25px 0px 45px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
